<template>
    <div class="asessment">
        <div class="close-box">
            <div class="close el-icon-close" @click="closeDialog"></div>
        </div>
        <div class="asessment-wrap">
            <div class="wrap-label">
                <span class="wrap-label-tag"></span>能力评估
            </div>
            <div class="wrap-item">
                <div class="wrap-item-label">答题数量</div>
                <div class="wrap-item-value">0</div>
            </div>
            <div class="wrap-item">
                <div class="wrap-item-label">正确率</div>
                <div class="wrap-item-value">0.00%</div>
            </div>
            <div class="wrap-item">
                <div class="wrap-item-label">全网最高答题数量</div>
                <div class="wrap-item-value">17429</div>
            </div>
            <div class="wrap-item">
                <div class="wrap-item-label">全网平均正确率</div>
                <div class="wrap-item-value">79.90%</div>
            </div>
        </div>
        <div class="wrap-separate"></div>
        <div class="asessment-wrap">
            <div class="wrap-label">
                <span class="wrap-label-tag"></span>学习统计
            </div>
            <div class="wrap-item">
                <div class="wrap-item-label">签到天数</div>
                <div class="wrap-item-value">1天</div>
            </div>
            <div class="wrap-item">
                <div class="wrap-item-label">经验等级</div>
                <div class="wrap-item-value">三级学渣</div>
            </div>
            <div class="wrap-item">
                <div class="wrap-item-label">累计登陆次数</div>
                <div class="wrap-item-value">2549</div>
            </div>
            <div class="wrap-item">
                <div class="wrap-item-label">学习时长</div>
                <div class="wrap-item-value">0小时 7分钟</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "Assessment",
  methods:{
      closeDialog(){
        this.$emit("close");
      },
  }
};
</script>
<style lang="scss" scoped>
@keyframes myfirst {
  //放大
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}
.asessment {
  animation: myfirst 0.3s;
  position: fixed;
  top: 228px;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 100;
  width: 380px;
  height: 500px;
  box-shadow: 0 0 5px #eee;
  border-radius: 10px;
   .wrap-separate {
      background-color: #f3f4f6;
      width: 100%;
      height: 7px;
    }
  .asessment-wrap {
    width: 100%;
    padding: 10px;
    .wrap-label {
      padding: 5px 15px;
      border-bottom: 1px #f1f1f1 solid;
      .wrap-label-tag {
        display: inline-block;
        width: 10px;
        height: 18px;
        background: #ff9900;
        vertical-align: text-top;
        margin-right: 10px;
      }
    }
    .wrap-item {
      display: inline-block;
      width: 49%;
      text-align: center;
      padding: 15px 0;
    }
    .wrap-item-label {
      font-size: 14px;
      color: #9c9c9c;
      padding: 5px 0;
    }
    .wrap-item-value {
      color: #333;
      font-size: 17px;
    }
  }
  .close-box {
    position: absolute;
    right: -12px;
    top: -12px;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .close {
      width: 25px;
      height: 25px;
      font-size: 18px;
      border-radius: 100%;
      background: #777;
      color: white;
      line-height: 27px;
      text-align: center;
    }
  }
}
</style>
